/**
 * Created by 荆安喜 on 2017/10/9.
 */
$(function () {
    var ad = appData(),
        pageNumNow = 1,
        paramsT = {},
        dataPages,
        time = "1",
        select = true,
        resourcesId = ""

    var jump = $.getUrlParam("id")
    $(function () {
        $('.sys-sidebar ul li').eq(3).addClass('active')

        showTable(true, 1, 'KMGA_RESOURCES_INFO', 'page','pageList','scripts/app/safe/trafficAnalysis/resourcesInfo.tmpl',jump)


        $('#page').on('click', searchEvent)

        //展开事件
        unfold()

       /* //流量概览
        getdatas()*/

        $('#amount').click()

        if(jump){
            setTimeout(function () {
                $('#page td:eq(0)').click()
                history.pushState(null,'','index.html')
            },200)
        }

    })


    //分页信息
    function showTable(dontRenderPager, page, url, domId,listId,tmp,id) {
        paramsT.page = page
        paramsT.pageSize = 15
        paramsT.id=id
        ad.selectList(url, paramsT, function (data) {
            $("#" + domId).empty();
            if (data.content.length === 0) {
                $("#" + domId).append("<tr><td colspan='4'  class='colspanCss'><h1>暂无数据</h1></td></tr>");
                $("#pageList").empty();
                return;
            }
            if (data.content <= appApi("PAGE_SIZE")) {
                $("#pageList").empty();
                return;
            }
            $.get(tmp, function (tmpl) {
                $("#" + domId).empty();
                dataPages = data
                $.tmpl(tmpl, data).appendTo("#" + domId);
                resourcesId= $('#page').find('tr')[0].dataset.id
                $($('#page').find('tr')[0]).addClass('active')
                getdatas()
                if(opens=='left'){
                    $(".col-left .table").find("tr").each(function () {
                        $(this).children("th:gt(2),td:gt(2)").hide();
                    })
                }


                //table 排序插件
                $('table').tablesort().data('tablesort');
                if (dontRenderPager) {
                    renderPager(data.totalRecord,null,listId,domId,tmp,url,id);
                }
            })

        });
    }

    function renderPager(totalRecord, nowPage,listId,domId,tmp,url,id) {
        $("#"+listId).pagination(totalRecord, 15, {
            callback: function (page_id, jq) {
                pageNumNow = page_id + 1;
                showTable(false, pageNumNow, url, domId,listId,tmp,id);
            }
        }, nowPage);
    }

    var  opens='left'
    //展开事件
    function unfold() {
        $("#tablefull").on('click', function () {
            if ($(this).hasClass("open")) {
                $(this).prop("class", "");
                $(".col-left .table").find("tr").each(function () {
                    $(this).children("th:gt(2),td:gt(2)").hide();
                })
                $(".col-left").stop(true).animate({"width": '20%'}, 400);
                $(".col-right").stop(true).animate({"width": '80%', "display": "none"}, 400, function () {
                    opens='left'
                    $(".col-right").show();
                    judge()
                });
            }
            else {
                $(this).prop("class", "open");
                $(".col-left .table").find("tr").each(function () {
                    $(this).children("th:gt(2),td:gt(2)").show();
                })
                $(".col-left").stop(true).animate({"width": '100%'}, 400,function () {
                    opens='right'
                });
                $(".col-right").hide();

            }
        });


        //统计周期
        $(".dropdown").on("click", "button", function () {
            $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
        })

        $('.dropdown-menu li').on('click', function () {
            time = this.dataset.id
            $('.dropdown').hasClass('open') ? $('.dropdown').removeClass('open') : $('.dropdown').addClass('open');
            if (select) {
                getAmount()
            } else {
                getNumber()
            }
        })

        $('#amount').on('click', getAmount)
        $('#number').on('click', getNumber)


        $('#page').on('click','a',function (d, i) {
            $("#info").show()
            var id=this.parentElement.parentElement.dataset.id
            showTable(true, 1, 'KMGA_RESOURCES_IPPAGE', 'ipPage','ipPageList','scripts/app/safe/trafficAnalysis/ipPageInfo.tmpl',id)
        })

        $(".dialog .close,#cancel").on("click",function(){
            $(".dialog").hide();
        })
    }

    //柱状图
    function histogram(id, option) {
        var myChart = echarts.init(document.getElementById(id));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //获取读取流量，写入流量，访问IP量
    function getdatas() {
        var ids = ['chart1', 'chart2', 'chart3']
        ad.selectList('KMGA_RESOURCES_VIEW', {id: resourcesId}, function (data) {
            data.forEach(function (d, i) {
                var option = {
                    title: {
                        text: d.name
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {
                            type : 'shadow'
                        },
                        confine:false
                    },
                    xAxis: {
                        data: d.xaxis
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        minInterval: 1
                    },
                    series: [{
                        name: '次数',
                        type: 'bar',
                        barWidth: 35,
                        data: d.ydata
                    }]
                }
                histogram(ids[i], option)
            })
        })
    }

    //访问量
    function getAmount() {

        ad.selectList('KMGA_ACCESS_AMOUNT', {timeCycle: time, id: resourcesId}, function (data) {
            var names = []
            var series = []
            data.datas.forEach(function (d, i) {
                names.push(d.name)
                var serie = {
                    name: d.name,
                    type: 'line',
                    lineStyle: {
                        normal: {
                            width: 2,
                        }
                    },
                    data: d.data
                }
                series.push(serie)
            })
            var option = {
                title: {
                    text: data.name
                },
                tooltip: {
                    trigger: 'axis'
                },

                legend: {
                    data: names
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxis
                },
                yAxis: [{
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                }],
                dataZoom: [{
                    type: 'inside',
                    start: 50,
                    end: 100
                }, {
                    show: true,
                    type: 'slider',
                    y: '90%',
                    start: 50,
                    end: 100
                }],
                series: series
            }
            histogram('chart4', option)
            select = true
            $('#amount').addClass('active')
            $('#number').removeClass('active')
        })
    }

    //访问次数
    function getNumber() {
        ad.selectList('KMGA_ACCESS_NUMBER', {timeCycle: time,id:resourcesId}, function (data) {
            var names = []
            var series = []
            data.datas.forEach(function (d, i) {
                names.push(d.name)
                var serie = {
                    name: d.name,
                    type: 'line',
                    lineStyle: {
                        normal: {
                            width: 2,
                        }
                    },
                    data: d.data
                }
                series.push(serie)
            })
            var option = {
                title: {
                    text: data.name
                },
                tooltip: {
                    trigger: 'axis'
                },

                legend: {
                    data: names
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxis
                },
                yAxis: [{
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                }],
                dataZoom: [{
                    type: 'inside',
                    start: 50,
                    end: 100
                }, {
                    show: true,
                    type: 'slider',
                    y: '90%',
                    start: 50,
                    end: 100
                }],
                series: series
            }
            histogram('chart4', option)
            select = false
            $('#amount').removeClass('active')
            $('#number').addClass('active')
        })
    }

    //今日详情事件
    function searchEvent(event) {
        if (event.target.localName == 'td') {
            if ($(event.target.parentElement).hasClass('active')) {
                $(event.target.parentElement).removeClass('active')
                resourcesId = ""
                judge()

            } else {
                $('#page tr').removeClass('active')
                $(event.target.parentElement).addClass('active')
                resourcesId = $(event.target.parentElement).attr('data-id')
                judge()
            }
        }
    }

    //执行查询访问量
    function judge() {
        getdatas()
        if ($('#amount').hasClass('active')) {
            $('#amount').click()
        } else {
            $('#number').click()
        }
    }


})